<template>
	<view class="box" v-if="dataForm.name">
		<view class="top">
			<view class="title-top">{{dataForm.name}}</view>
			<view class="top-tags">
				<view class="tag-info">{{dataForm.itemCategory}}</view>
				<view class="tag-unStart">已完成</view>
			</view>
		</view>
		<view class="kiss-list">
			<view class="kiss-list-title">
				<view class="left">
					创建时间
				</view>
				<view class="right1">
					{{dataForm.createTime}}
				</view>
			</view>
		</view>
		<view class="kiss-list">
			<view class="kiss-list-title">
				<view class="left">
					创建人
				</view>
				<view class="right1">
					{{dataForm.createUserName}}
				</view>
			</view>
		</view>
		<view class="my-title">
			演练基本信息
		</view>
		<view class="kiss-list">
			<view class="kiss-list-title" style="align-items: flex-start;">
				<view class="left">
					演练时间
				</view>
				<view class="right1" style="align-items:flex-end;flex-direction: column;">
					<view>{{dataForm.drillStartTime}}</view>
					<view>至{{dataForm.drillEndTime}}</view>
				</view>
			</view>
		</view>
		<view class="kiss-list">
			<view class="kiss-list-title">
				<view class="left">
					演练人员
				</view>
				<view class="right1" style="flex: 1;" v-if="dataForm.signUserNames.length>3">
					{{dataForm.signUserNames.join(',').substr(0,10)}}...等{{dataForm.signUserNames.length}}人 <span
						style="margin-left: 6rpx;color: rgba(15, 83, 172, 1);"
						@click="handleAll(dataForm.signUserNames)">查看全部</span>
				</view>
				<view class="right1" v-else>
					{{dataForm.signUserNames.join(",")}}
				</view>
			</view>
		</view>
		<view class="kiss-list">
			<view class="kiss-list-title">
				<view class="left">
					演练地址
				</view>
				<view class="right1">
					{{dataForm.address}}
				</view>
			</view>
		</view>
		<view class="kiss-list">
			<view class="kiss-list-title">
				<view class="left">
					总指挥
				</view>
				<view class="right1">
					{{dataForm.chiefName}}
				</view>
			</view>
		</view>
		<view class="kiss-list">
			<view class="kiss-list-title">
				<view class="left">
					记录人
				</view>
				<view class="right1">
					{{dataForm.recorderName}}
				</view>
			</view>
		</view>
		<view class="px-list">
			<view class="px-list-title">
				备注
			</view>
			<view class="px-list-content">{{dataForm.remark || '无'}}</view>
		</view>

		<view class="line8"></view>
		<!-- 附件 -->
		<view class="bx-title ">
			<view class="left">
				附件
			</view>
		</view>
		<view class="bx-upload" v-if="wxfileList.length>0">
			<view v-for="(item,index) in wxfileList" :key="index">
				<view class="tab-list">
					<view class="tab-left">
						<image src="../../../static/images/beijian/wenjian.png"></image>
					</view>
					<view class="tab-right">
						<view class="data-txt">
							<view class="txt1">{{item.name}}</view>
							<view class="txt3">{{item.size}}kb</view>
						</view>
						<view style="color: #0F53AC;width: 80rpx;text-align: center;" @click="handleSeeFile(item,index)">
							查看
						</view>
					</view>
				</view>
			</view>

		</view>
		<view style="color: #2b2b2b;padding: 24rpx 30rpx;" v-else>暂无附件</view>
		<view class="my-title">
			演练记录
		</view>
		<view class="px-list">
			<view class="px-list-title">
				演练过程、人员培训情况描述
			</view>
			<view class="px-list-content">{{dataForm.drillRecord.content || '无'}}</view>
		</view>
		<view class="kiss-list">
			<view class="kiss-list-title">
				<view class="left">
					预案适宜性评审
				</view>
				<view class="right1" style="width: 58vw;">
					{{dataForm.drillRecord.adequacyName}}
				</view>
			</view>
		</view>
		<view class="kiss-list">
			<view class="kiss-list-title">
				<view class="left">
					预案充分性评审
				</view>
				<view class="right1" style="width: 58vw;">
					{{dataForm.drillRecord.sufficiencyName}}
				</view>
			</view>
		</view>
		<view class="kiss-list">
			<view class="kiss-list-title">
				<view class="left">
					人员到位情况
				</view>
				<view class="right1" style="text-align: right;">
					{{dataForm.drillRecord.adventName}}
				</view>
			</view>
		</view>
		<view class="kiss-list">
			<view class="kiss-list-title">
				<view class="left">
					现场物资
				</view>
				<view class="right1">
					{{dataForm.drillRecord.materialsName}}
				</view>
			</view>
		</view>
		<view class="kiss-list">
			<view class="kiss-list-title">
				<view class="left">
					个人防护
				</view>
				<view class="right1">
					{{dataForm.drillRecord.shieldName}}
				</view>
			</view>
		</view>
		<view class="kiss-list">
			<view class="kiss-list-title">
				<view class="left">
					整体组织
				</view>
				<view class="right1">
					{{dataForm.drillRecord.organizeName}}
				</view>
			</view>
		</view>
		<view class="kiss-list">
			<view class="kiss-list-title">
				<view class="left">
					抢险组分工
				</view>
				<view class="right1">
					{{dataForm.drillRecord.divideName}}
				</view>
			</view>
		</view>
		<view class="kiss-list">
			<view class="kiss-list-title">
				<view class="left">
					实战效果评价
				</view>
				<view class="right1">
					{{dataForm.drillRecord.evaluateName}}
				</view>
			</view>
		</view>
		<view class="line8"></view>
		<view class="px-list">
			<view class="px-list-title">
				存在的问题
			</view>
			<view class="px-list-content">{{dataForm.drillRecord.problem || '无'}}</view>
		</view>
		<view class="px-list">
			<view class="px-list-title">
				改进措施
			</view>
			<view class="px-list-content">{{dataForm.drillRecord.measure || '无'}}</view>
		</view>
		<view class="kiss-title">
			<view class="left">
				演练照片
			</view>
		</view>
		<view class="kiss-upload">
			<view class="textInput" v-if="fileList1.length == 0">暂无记录照片</view>
			<uploadImg v-else :maxCount="fileList1.length" :fileType="16" :fileList="fileList1" :sourceType="sourceType"
				:deletable="false"></uploadImg>

		</view>
		<view class="line8"></view>
		<view class="bx-title ">
			<view class="left">
				演练文件
			</view>
		</view>
		<view class="bx-upload" v-if="ylfileList.length>0">
			<view v-for="(item,index) in ylfileList" :key="index">
				<view class="tab-list">
					<view class="tab-left">
						<image src="../../../static/images/beijian/wenjian.png"></image>
					</view>
					<view class="tab-right">
						<view class="data-txt">
							<view class="txt1">{{item.name}}</view>
							<view class="txt3">{{item.size}}kb</view>
						</view>
						<view style="color: #0F53AC;width: 80rpx;text-align: center;" @click="handleSeeFile(item,index)">
							查看
						</view>
					</view>
				</view>
			</view>

		</view>
		<view style="color: #2b2b2b;padding: 24rpx 30rpx;" v-else>暂无演练附件</view>
		<u-gap height="1" bgColor="#f2f2f2"></u-gap>
		<view class="px-list">
			<view class="px-list-title">
				备注
			</view>
			<view class="px-list-content">{{dataForm.drillRecord.remark || '无'}}</view>
		</view>
		<view class="kiss-list" v-if="dataForm.signFlag">
			<view class="kiss-list-title">
				<view class="left">
					签到人数
				</view>
				<view class="right1" @click="handleToName">
					{{Number(dataForm.signNum)}}/{{dataForm.totalNum}}
					<span
						style="margin-right: 10rpx;margin-left: 10rpx;">{{dataForm.totalNum-dataForm.signNum}}人未签到</span>
					<span style="color: rgba(15, 83, 172, 1);">查看全部签名</span>
				</view>
			</view>
		</view>
		<view class="kiss-list">
			<view class="kiss-list-title">
				<view class="left">
					记录人
				</view>
				<view class="right1">
					<span style="margin-right: 10rpx;">{{dataForm.recorderName}}</span>
					<span style="color: rgba(15, 83, 172, 1);"
						@click="handleSeeSign(dataForm.drillRecord.recorderSign)">查看签名</span>
				</view>
			</view>
		</view>
		<view class="kiss-list">
			<view class="kiss-list-title">
				<view class="left">
					提交时间
				</view>
				<view class="right1">
					{{dataForm.drillRecord.updateTime}}
				</view>
			</view>
		</view>
		<view class="bottom-subside" style='height: 22px;'></view>
	</view>
</template>

<script>
	import uploadImg from '../components/uploadimg/uploadimg.vue';
	export default {
		components: {
			uploadImg
		},
		data() {
			return {
				fileList1: [],
				sourceType: ['album', 'camera'],
				saveParams: {
					pictures: ''
				},
				// 培训id
				id: '',
				dataForm: {},
				unionData: {},
				wxfileList: [],
				ylfileList: []
			}
		},
		onLoad(options) {
			this.id = options.id
			this.initData()
		},
		methods: {

			initData() {
				uni.$u.http.get(`/check/mobile/drillInfo/getInfo/${this.id}`).then(res => {
					if (res.code == 0) {
						this.dataForm = res.data
						//异常照片
						this.fileList1 = [];
						this.saveParams.pictures = res.data.drillRecord.drillImgs;
						if (res.data.drillRecord.drillImgs) {
							var pictures = res.data.drillRecord.drillImgs.split(',')
							pictures.forEach(s => {
								let dd = {
									url: s
								}
								this.fileList1.push(dd);
							})
						}
						//附件回显
						if (this.dataForm.fileNames != "") {
							var fileLists = this.dataForm.fileNames.split(',')
							var fileSizes = this.dataForm.fileSizes.split(',')
							var filePathss = this.dataForm.filePaths.split(',')
							fileLists.forEach((s, index) => {
								let dd = {
									name: s,
									size: fileSizes[index],
									url: filePathss[index]
								}
								this.wxfileList.push(dd);
							})
						}
						//演练附件回显
						if (this.dataForm.drillRecord.fileNames != "") {
							var fileLists = this.dataForm.drillRecord.fileNames.split(',')
							var fileSizes = this.dataForm.drillRecord.fileSizes.split(',')
							var filePathss = this.dataForm.drillRecord.filePaths.split(',')
							fileLists.forEach((s, index) => {
								let dd = {
									name: s,
									size: fileSizes[index],
									url: filePathss[index]
								}
								this.ylfileList.push(dd);
							})
						}
					}
				}).catch(err => {})
			},
			// 查看全部
			handleAll(list) {
				uni.navigateTo({
					url: `/pages/subPackagesC/mineTrain/trainPerson?personList=${list}`
				})
			},

			// 查看全部签名
			handleToName() {
				uni.navigateTo({
					url: `/pages/subPackagesA/emergencyDrill/signList?id=${this.id}`
				})
			},
			sumbit() {
				console.log(1111111);
			},
			// 查看记录人签名
			handleSeeSign(sign) {
				uni.$u.http.get(
					`/base/upload/bindFileUrl?fileUrl=${sign}`
				).then(res => {
					if (res.code == 0) {
						uni.navigateTo({
							url: `/pages/subPackagesD/mycenter/sginselect?url=
      					${encodeURIComponent(JSON.stringify(res.data))}&noShow=true`
						})
					}
				}).catch(err => {})
			},
			handleSeeFile(item,index){
				uni.$u.http.get(`/base/upload/bindFileUrlByFileName?fileUrl=${item.url}&fileName=${item.name}`).then(res => {
					if (res.code == 0) {
						uni.downloadFile({
							url: res.data, //下载地址，后端接口获取的链接
							filePath: wx.env.USER_DATA_PATH +'/'+ item.name,
							success: (data) => {
								if (data.statusCode === 200) {
									
									var filePath = data.filePath
									//预览
									uni.openDocument({
										filePath: filePath,
										showMenu: true,
										success: function(res) {}
									});
								}
							},
							fail: (err) => {
								uni.showToast({
									icon: 'none',
									mask: true,
									title: '失败请重新下载',
								});
							},
						});
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		.top {
			background-color: #ffffff;
			padding: 32rpx;
			border-bottom: 2rpx solid #F5F5F5;

			.title-top {
				font-size: 34rpx;
			}

			.top-tags {
				display: flex;
				font-size: 24rpx;
				margin-top: 16rpx;

				.tag-info {
					border-radius: 4px;
					padding: 4px 12px;
					line-height: 17.38px;
					background-color: rgba(140, 140, 140, 0.2);
					color: #8C8C8C;
					margin-right: 24rpx;
				}

				.tag-unStart {
					border-radius: 4px;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					padding: 4px 12px;
					color: rgba(2, 173, 130, 1);
					background: rgba(40, 184, 105, 0.2);
				}
			}
		}

		.my-title {
			background-color: #F5F5F5;
			padding: 28rpx 32rpx;
			font-size: 17px;
			font-weight: 500;
		}
	}

	.kcInfo {
		padding: 32rpx;
		display: flex;

		.kcInfo-img {
			width: 160rpx;
			height: 160rpx;
			margin-right: 32rpx;
		}

		.kcInfo-con {
			font-weight: 400;
			align-items: flex-end;

			.name {
				font-size: 32rpx;
				color: #2B2B2B;
				margin-bottom: 16rpx;
				width: 400rpx;
				overflow: hidden; //超出的文本隐藏
				text-overflow: ellipsis; //溢出用省略号显示
				white-space: nowrap; // 默认不换行；
			}

			.name2 {
				font-size: 15px;
				font-weight: 400;
				color: #4D4D4D;
				width: 400rpx;
				overflow: hidden; //超出的文本隐藏
				text-overflow: ellipsis; //溢出用省略号显示
				white-space: nowrap; // 默认不换行；
			}
		}
	}

	.kcBtn {
		display: flex;
		text-align: center;

		.selectJd {
			width: 100%;
			border: 2rpx solid #EDEDED;
			padding: 24rpx 0;
			color: rgba(15, 83, 172, 1);
		}
	}

	.px-list {
		padding: 32rpx;
		font-size: 16px;
		font-weight: 400;
		border-bottom: 1px solid #F5F5F5;

		.px-list-title {
			color: #666666;

		}

		.px-list-content {
			margin-top: 16rpx;
			color: #2B2B2B;
			word-break: break-all;
			word-wrap: break-word;
		}
	}

	.kiss-list {
		.kiss-list-title {
			.right1 {
				line-height: 24px;
			}
		}
	}

	.tab-list {
		display: flex;
		padding: 24rpx 0 24rpx 20rpx;
		border-radius: 8rpx;
		background: #f2f2f2;
		margin-top: 20rpx;

		.tab-left {
			border-radius: 8rpx;
			display: flex;
			align-items: center;

			image {
				width: 96rpx;
				height: 96rpx;
				border-radius: 8rpx;
			}

			.iconfontsize {
				font-size: 40rpx;
				color: #0F53AC;
			}
		}

		.tab-right {
			width: 100%;
			padding: 0 32rpx 0 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.data-txt {
				flex: 1;
				.txt1 {
					// width: 550rpx;
					font-size: 28rpx;
					color: #2B2B2B;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					word-wrap: break-word;
					word-break: break-all;
				}

				.txt2 {
					font-size: 28rpx;
					color: #8c8c8c;
					margin-top: 10rpx;
				}

				.txt3 {
					color: #A6A6A6;
					font-size: 28rpx;
					margin-top: 8rpx;
				}
			}
		}

	}

	.add-file {
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 12rpx;
		border: 1px solid #0F53AC;
		margin-top: 30rpx;
		padding: 20rpx 0;
		color: #0F53AC;
		// width: 680rpx;
	}

	.bx-upload {
		padding: 20rpx 30rpx;
		background: #fff;
	}

	.bx-title {
		background: #fff;
		padding: 52rpx 30rpx 0;

		.left {
			display: flex;
			font-size: 32rpx;
			font-weight: 400;
			letter-spacing: 0px;
			line-height: 0px;
			color: #4D4D4D;
			background: #fff;
		}
	}
</style>
